<template>
  <div slot="overlay" class="ant-dropdown-menu s-tool-column ant-dropdown-content" style="position: absolute;right:-20px;">
    <div class="s-tool-column-header s-tool-column-item">
<!--      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>-->
      <template v-if="switchStorage&&ls_props_columns!=''">
        <a  @click="saveColumnsToStorage"  style="margin-right: 5px;">保存</a>
        <a-tooltip  placement="topRight">
          <template slot="title">
            <span>点击保存将保存在本地浏览器中，可重置或重新编辑，清除浏览器缓存将导致保存失效。</span>
          </template>
          <a-icon type="info-circle" style="margin-right: 12px;" />
        </a-tooltip>
      </template>

      <a @click="reset">重置</a>
    </div>
    <a-divider />
    <div class="ant-checkbox-group">
      <div>
        <draggable v-model="columnsSetting" animation="300" @end="emitColumnChange">
          <div v-for="item in columnsSetting" :key="item.title">
            <div v-if="!item.fixed&&item.title!='操作'" class="s-tool-column-item" >
              <template >
                <div class="s-tool-column-handle" >
                  <a-icon type="more"/>
                  <a-icon type="more"/>
                </div>
                <a-checkbox v-model="item.checked" @change="onChange">{{ item.title }}</a-checkbox>
              </template>
            </div>
          </div>

        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { mapState } from 'vuex'

export default {
    props: {
      columns: {
        type: Array,
        default: () => ([])
      },
      ls_props_columns:{
        type:String,
        default:''
      }
    },
    components: {
      draggable
    },
    data() {
      return {
        local_storage_columns:{}, //本地缓存中的列columns对象集合
        indeterminate: false,
        checkAll: true,
        columnsSetting: [],
        originColumns: []
      }
    },
    computed: {
      ...mapState({
        switchStorage: state => state.app.tableCol
      })
    },
    methods: {
      saveColumnsToStorage(){
        // console.log('保存到浏览器',this.columnsSetting)
        if(this.ls_props_columns===''){
          return
        }
        this.local_storage_columns[this.ls_props_columns]= this.columnsSetting
        window.localStorage.setItem('LS_COLUMNS',JSON.stringify(this.local_storage_columns))
        this.$message.success('保存成功！')
      },
      reset() {
        this.columnsSetting = JSON.parse(JSON.stringify(this.originColumns))
        this.indeterminate = false
        this.checkAll = true
        this.emitColumnChange()
      },
      onChange() {
        const checkedList = this.columnsSetting.filter(value => value.checked)
        this.indeterminate = !!checkedList.length && checkedList.length < this.columnsSetting.length
        this.checkAll = checkedList.length === this.columnsSetting.length
        this.emitColumnChange()
      },
      onCheckAllChange(e) {
        const val = e.target.checked
        console.log('全选',val)
        Object.assign(this, {
          indeterminate: false,
          checkAll: val,
          columnsSetting: this.columns.map(value =>{

            const new_obj ={value, checked: val }
            return new_obj
          })
        })
        this.emitColumnChange()
      },
      emitColumnChange() {
        this.$emit('columnChange', this.columnsSetting)
      }
    },
    mounted() {
      this.columnsSetting = this.columns.map(value => {
        // console.log('列展示',value)
        let isCheck = true
        if(value.checked===false){
          isCheck = false
        }
        const new_value = { ...value, checked: isCheck }
        return new_value
      })
      this.originColumns = JSON.parse(JSON.stringify(this.columnsSetting))
      //无传缓存参数
      if(this.switchStorage){
        if(this.ls_props_columns===''){
          console.log('无传缓存参数')
          return
        }
        const ls_columns =JSON.parse(window.localStorage.getItem('LS_COLUMNS'))
        if(ls_columns){
          this.local_storage_columns = JSON.parse(window.localStorage.getItem('LS_COLUMNS'))
        }
        if(ls_columns&&Object.keys(ls_columns).includes(this.ls_props_columns)){
          this.columnsSetting = this.local_storage_columns[this.ls_props_columns]
        }
      }

    }
  }
</script>

<style lang="less" scoped>

</style>
